<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>学校新闻添加</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="../css/item.css">
	<link rel="stylesheet" href="../css/layui.css" />
	<style>
		.portrait {
			width: 100px;
			height: 100px;

		}

		.layui-row {
			margin-top: 50px;
			margin-bottom: 50px;
		}

		.layui-textarea {
			min-height: 200px !important;
		}

		.news_video {
			width: 200px;
			height: 100px;
		}
	</style>
</head>

<body>


	<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
		<input type="file" id="file" name="file" accept="image/*">
	</form>

	<div class="layui-row" id="vue-root">
		<form method="post" ref="form" enctype="multipart/form-data" style="display: none">
			<input type="file" ref="file" name="file" v-validate="'size:102400'" data-vv-as="上传文件" @change="upload">
		</form>
		<div class="layui-col-md6 layui-col-md-offset3">
			<div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-block">
					<input name="newsName" v-validate="'required'" data-vv-as="标题" autocomplete="off"
						placeholder="请输入新闻标题" class="layui-input name" v-model="item.name">
					<div class="checkout_state" v-text="err('newsName')"></div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">时间</label>
				<div class="layui-input-block">
					<input name="newsTime" v-validate="'required'" data-vv-as="时间" id="time" ref="time"
						autocomplete="off" placeholder="请输入发布时间" class="layui-input time" v-model="item.time">
					<div class="checkout_state" v-text="err('newsTime')"></div>
				</div>
			</div>
			<!-- <div class="layui-form-item">
				<label class="layui-form-label">图片上传</label>
				<label @click="uploadImg">
					<img class="portrait" :src="img">
				</label>
			</div> -->
			<div class="layui-form-item">
				<label class="layui-form-label">视频上传</label>
				<label @click="uploadVideo" class="portrait" v-if="!video">
					<img style="width: 100px;height:100px; margin-left: 0;" src="../image/upload.png">
				</label>
				<video @click="uploadVideo" class="news_video" controls="controls" :src="video" v-if="video"></video>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">内容介绍</label>
				<div class="layui-input-block">
					<editor :init="init1" v-model="item.intro" />
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">是否在微信端显示</label>
				<div class="layui-input-block teachertitle" style="padding-top: 13px;line-height: 15px;">
					<input name="checkbox" type="checkbox" class="checkbox" v-model="item.show" />
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<div class="offer" @click="submit">立即提交</div>
					<div class="return" onclick="history.back()">取消</div>
				</div>
			</div>
		</div>
	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>


	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/scriptZIP/dayjs.min.js"></script>


	<script src="/scriptZIP/tinymce.min.js"></script>
	<script src="/lib/tinymce-vue.min.js"></script>
	<script src="/js/tinymce_image_plugin.js"></script>

	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>

	<script>

		var schoolId = top_params().id;
		var field = 'news';

		var app = new Vue(merge({
			components: {
				editor: Editor
			},
			data: {
				item: {
					pic: null,
					video: null,
					schoolId: schoolId,
					show: true
				},
				url: '/pc/news',
				type: null,
				init1: tinymceInit
			},
			methods: {
				formatData: function (data) {
					if (data.time) data.time = dayjs(data.time).format('YYYY-MM-DD');
				},
				upload: function () {
					this.$validator.validate('file').then(function (result) {
						if (!result) {
							alert('上传文件大小应在100MB以内');
							this.$refs.file.value = '';
							return;
						}

						axios.post('/pc/upload/news?schoolId=' + this.item.schoolId,
							new FormData(this.$refs.form)).then(function (res) {
								this.item[this.type] = res.data.data;
								this.$refs.file.value = '';
							}.bind(this));

					}.bind(this));
				},
				uploadImg: function () {
					this.type = 'pic';
					var input = this.$refs.file;
					input.accept = 'image/*';
					input.click();
				},
				uploadVideo: function () {
					this.type = 'video';
					var input = this.$refs.file;
					input.accept = 'video/*';
					input.click();
				},
				fillData: function () {
					this.item.hide = !this.item.show;
				},
			},
			computed: {
				img: function () {
					if (!this.item.pic) return '../image/upload.png';
					return '/static/' + this.item.schoolId + '/news/' + this.item.pic;
				},
				video: function () {
					if (!this.item.video) return null;
					return '/static/' + this.item.schoolId + '/news/' + this.item.video;
				}
			},
			watch: {
				'item.intro': function (nv, ov) {
					replaceImg(this.item, 'intro');
				}
			}
		}));
		laydate.render({
			elem: '#time', //指定元素
			type: "datetime",
			done: function (value, date, endDate) {
				app.item.time = value;
			}
		});
	</script>
</body>

</html>